<template>
  <div>
    <el-form  class="main-content" ref="form" inline :model="form" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名:" prop="userName">
            <el-input  v-model="form.userName" placeholder="请输入姓名" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员编号:" prop="uid">
            <el-input  v-model="form.uid" placeholder="请输入人员编号" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员性质:" prop="personnelNature">
            <el-select style="width:100%;" v-model="form.personnelNature">
              <el-option label="劳务工" value="1"></el-option>
              <el-option label="合同制" value="2"></el-option>
              <el-option label="全民" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专兼职:" prop="isFullTime">
            <el-select style="width:100%;" v-model="form.isFullTime">
              <el-option label="专职" value="1"></el-option>
              <el-option label="兼职" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="区划地址:" prop="regionalAddress">
            <el-select style="width:100%;" v-model="form.regionalAddress">
              <el-option label="北京市" value="1"></el-option>
              <el-option label="天津市" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系手机:" prop="phone">
            <el-input  v-model="form.phone" placeholder="请输入联系手机" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同到期:" prop="expire">
            <el-select style="width:100%;" v-model="form.expire">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="getPersonnel">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="getPersonnel">批量导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger"  icon="el-icon-delete" size="small" @click="handleReset" >清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="main-content personnel-table">
      <el-table border :data="tableData" style="width: 100%;" max-height="400">
        <el-table-column prop="uid" label="人员编号"  align="center" />
        <el-table-column prop="isFollowed" label="是否关注"  align="center" />
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别"  align="center" />
        <el-table-column prop="phone" label="联系手机"  align="center" />
        <el-table-column prop="personnelNature" label="人员性质"  align="center" />
        <el-table-column prop="isOffice" label="办公人员" align="center" />
        <el-table-column prop="cooperationUnit" label="合作单位" align="center" />
        <el-table-column prop="branchPersonnel" label="分公司人员" align="center" />
        <el-table-column prop="regionalAddress" label="区划地址" align="center" />
        <el-table-column prop="isFullTime" label="专兼职" align="center" />
        <el-table-column prop="idNo" label="身份证号码" align="center" />
        <el-table-column prop="expire" label="合同到期时间" align="center" />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="handleDeletePre(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @current-change="handleChangeCurrent"
      />
    </div>
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <span>确认删除单号为{{ currentInfo.did }}的合同吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleDelete"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonnel, delPersonnel } from "../../api/personnel";
export default {
  name: "HrQuery",
  data() {
    return {
      form: {
        userName: "",
        id: "",
        personnelNature: "",
        isFullTime: "",
        regionalAddress: "",
        phone: "",
        expire: ""
      },
      tableData: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      visible: false,
      currentInfo: {},
    };
  },
  created() {
    this.getPersonnel();
  },
  methods: {
    async getPersonnel() {
      const { current, pageSize } = this.pageInfo;
      const res = await getPersonnel({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data;
      this.pageInfo = pageInfo;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getPersonnel();
    },
    handleReset() {
      this.$refs["form"].resetFields();
      this.getPersonnel();
    },
    handleDeletePre(info) {
      this.visible = true;
      this.currentInfo = info;
    },
    async handleDelete() {
      if (!this.currentInfo.id) {
        this.$message({
          type: "warning",
          message: "无效操作",
        });
      }
      const res = await delPersonnel({ id: this.currentInfo.id });
      if (res?.data?.code === 0) {
        this.visible = false;
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getPersonnel();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.personnel-table {
  margin-top: 20px;
  /deep/ .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
